<template>
  <div class="container">
    <van-nav-bar left-arrow @click-left="onClickLeft">
      <div slot="title" class="title">我的资料</div>
      <van-icon slot="left" class="lf" name="arrow-left" />
    </van-nav-bar>
    <van-cell title="头像" class="avat" is-link @click="$refs.file.click()">
      <input type="file" hidden ref="file" @change="onFileChange" />
      <van-image
        round
        fit="cover"
        class="avatar"
        :src="attimg ? attimg : userInfo.avatarUrl"
      />
    </van-cell>
    <van-cell title="昵称" :value="nicknames" is-link @click="shownick" />
    <van-cell title="性别" :value="gender()" is-link @click="showgend" />
    <div class="bar"></div>
    <van-cell title="生日" :value="birthdaytimer" is-link @click="showtime" />
    <van-cell title="地区" value="湖南 长沙" is-link />
    <van-cell title="简介"> </van-cell>
    <van-field
      v-model="message"
      rows="2"
      autosize
      type="textarea"
      maxlength="300"
      placeholder="请输入个人介绍..."
      show-word-limit
    />
    <van-popup
      v-model="shownickname"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <update-name v-model="userInfo.nickname" @close="shownickname = false"
    /></van-popup>
    <van-popup
      v-model="showtimedata"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <time-data v-model="birthdaytimer" @close="showtimedata = false"
    /></van-popup>
    <van-popup
      v-model="showgender"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <gender v-model="userInfo.gender" @close="showgender = false"
    /></van-popup>
  </div>
</template>

<script>
import { updatainfo } from '@/api/myprofile'
import gender from './components/gender'
import moment from 'moment'
import { mapGetters } from 'vuex'
import UpdateName from './components/UpdateName'
import TimeData from './components/TimeData'
import { setimg } from '@/api/updataimg'
export default {
  name: '',
  data () {
    return {
      timevalue: '输入生日信息',
      show: false,
      message: '',
      shownickname: false,
      showgender: false,
      showtimedata: false,
      contryage: '',
      birthdaytimer: '',
      attimg: '',
      genders: '',
      nicknames: '',
      cookie: ''
    }
  },
  created () {
    this.getInfo()
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted () {},
  methods: {
    getInfo () {
      // console.log(this.userInfo.birthday)
      this.birthdaytimer = this.birthdaytime()
      this.genders = this.userInfo.gender
      this.nicknames = this.userInfo.nickname
      this.cookie = this.$store.state.cookie
      console.log(this.genders)
    },
    showPopup () {
      this.show = true
    },
    async onClickLeft () {
      const birthdays = this.birthdaytimer
      const signature = this.message
      const nickname = this.nicknames
      const gender = this.genders
      const cookie = this.cookie
      try {
        await updatainfo(signature, nickname, birthdays, gender, cookie)
        this.userInfo.birthday = birthdays
        this.userInfo.gender = gender
        this.userInfo.nickname = nickname
        this.userInfo.signature = signature
        this.$store.commit('getuserInfo', this.userInfo)
        this.$router.back()
      } catch (error) {
        console.log(error)
      }
    },
    shownick () {
      // console.log(1111)
      this.shownickname = true
    },
    showgend () {
      this.showgender = true
    },
    showtime () {
      this.showtimedata = true
    },
    gender () {
      if (this.userInfo.gender > 0) {
        return '男'
      } else {
        return '女'
      }
    },
    birthdaytime () {
      const a = this.userInfo.birthday
      return moment(a).format('YYYY-MM-DD')
      // return moment(this.userInfo.birthday).format('YYYY-MM-DD')
    },
    async onFileChange () {
      const files = this.$refs.file.files[0]
      // console.log(files)
      const formData = new FormData()
      formData.set('imgFile', files)

      const { data } = await setimg(formData, Date.now(), this.cookie)
      this.attimg = data.url
      this.userInfo.avatarUrl = data.url
      this.$store.commit('getuserInfo', this.userInfo)
    }
  },
  components: {
    UpdateName,
    TimeData,
    gender
  }
}
</script>

<style scoped lang="less">
.container {
  .title {
    font-weight: 700;
  }
  .lf {
    color: black;
  }
  /deep/.avat {
    display: flex;
    flex-direction: row;
    align-items: center;
    .avatar {
      padding-top: 12px;
      width: 66px;
      height: 66px;
    }
  }
  .bar {
    width: 100%;
    height: 18px;
    font-size: 28px;
    background-color: rgb(241, 241, 241);
  }
}
</style>
